<script>
import { mapState } from 'vuex';

export default {
  name: 'DzSwipe',
  props: {
    imgs: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      ind: 0,
    };
  },
  computed: {
    ...mapState({
      isMobile: (state) => state.isMobile,
    }),
  },
  methods: {
    handleLightChange(index) {
      this.ind = index;
    },
  },
};
</script>

<template>
  <div class="zdzq-section-right">
    <img
      v-for="(item, index) in imgs"
      :key="`${index}img`"
      :src="item"
      alt=""
      class="zdzq-solution-img zdzq-pc-img"
    />
    <div v-if="imgs.length && isMobile" class="dzq-layout_section-light-m">
      <div class="dzq-layout_section-light__box">
        <van-swipe
          class="dzq-layout_section-light__list"
          style="transform: translate(0)"
          :autoplay="2000"
          :show-indicators="false"
          @change="handleLightChange"
        >
          <van-swipe-item v-for="item in imgs" :key="item">
            <img class="zdzq-solution-img" :src="item" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="dzq-layout_section-light__tool">
        <span
          v-for="(item, key) in imgs"
          :key="key"
          class="dzq-layout_section-light__dot"
          :class="
            key === ind
              ? 'dzq-layout_section-light__dot is-selected'
              : 'dzq-layout_section-light__dot'
          "
        ></span>
      </div>
    </div>
  </div>
</template>
